<%@ page import="java.util.HashMap" %><%--
  Created by IntelliJ IDEA.
  User: PurpleFish
  Date: 2025/1/4
  Time: 21:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>商品详情</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#addItemForm').on('submit', function(event) {
            event.preventDefault(); // 阻止表单的默认提交行为
            $.ajax({
                url: '/CartServlet',
                type: 'POST',
                data: $(this).serialize(), // 序列化表单数据
                success: function(response) {
                    if (response.status === 'success') {
                        alert(response.message); // 显示成功消息
                        window.open('${pageContext.request.contextPath}/CartServlet');
                    } else {
                        alert(response.message); // 显示错误消息
                    }
                },
                error: function() {
                    alert('请求失败，请稍后重试。');
                }
            });
        });
    });
</script>
<body>
    <div class="top">
        <a href="${pageContext.request.contextPath}/index"><</a>
        <div>商品详细信息</div>
    </div>
    <div class="body">
        <div class="box">
            <%
                HashMap<String,String> user =  (HashMap<String, String>) request.getSession().getAttribute("user");
                int userRole = 0;
                int userId = 0;
                if(user==null){

                }else{
                    userRole = Integer.parseInt(user.get("roleId"));// 从会话中获取用户ID
                    userId = Integer.parseInt(user.get("userId"));
                }

            %>
            <form action="${pageContext.request.contextPath}/productDetail" method="post" class="addF" style="display: <%=userRole!=0?"inherit":"none"%>">
                <input type="hidden" name="pid" value="${productInfo.get("pid")}">
                <input type="hidden" name="uid" value="<%=userId%>">
                <button type="submit" class="btn btn-primary">添加关注</button>
            </form>
            <form action="CartServlet" method="post" id="addItemForm" style="display: <%=userRole!=0?"inherit":"none"%>">
                <input type="hidden" name="action" value="addItem"/>
                <input type="hidden" name="itemId" value="${productInfo.get("pid")}"/>
                <label>
                    <input type="number" name="quantity" value="1" min="1"/>
                </label>
                <button type="submit">添加到购物车</button>
            </form>
            <h3>
                ${productInfo.get("name")}
            </h3>
            <h6>
                店铺：${productInfo.get("uid")}
            </h6>
            <img src="${productInfo.get("image")}" alt="商品图片">
            <div>价格:${productInfo.get("price")}</div>
            <div>
                ${productInfo.get("description")}
            </div>
        </div>
    </div>
    <div class="reviews">
        <h2>用户评论</h2>
        <c:if test="${not empty reviews}">
            <c:forEach var="review" items="${reviews}">
                <div class="row">
                    <h3>评论内容: ${review.reviewText}</h3>
                    <p>用户ID: ${review.userId}</p>
                    <p>评论日期: ${review.reviewDate}</p>
                </div>
            </c:forEach>
        </c:if>
        <c:if test="${empty reviews}">
            <h5>无</h5>
        </c:if>
    </div>
</body>
<style>
    a{
        display: inline-block;
        text-decoration: none;
        color: inherit;
        cursor: default;
        outline: none;
        font-size: 25px;
        padding: 10px;
    }
    .addF{
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
    #addItemForm{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 90%;
        height: 50px;
        display: flex;
        justify-content: space-around;
        padding: 20px 5%;
        background-color: #e69500;
        text-align: center;
        line-height: 30px;
        align-items: center;
    }
    #addItemForm input{
        width: 50px;
        height: 30px;
    }
    #addItemForm button{
        width: 200px;
        height: 30px;
    }
    .row{
        max-width: 400px;
        margin: 20px;
    }
    .reviews{
        display: flex;
        flex-direction: column;
        width: 70%;
        padding: 30px 10%;
        margin: 0 auto 70px;
        box-shadow: #6c757d;
        border-radius: 10px;
        border-top: 2px black solid;
    }
    .body img{
        max-width: 600px;
    }
    .body div,h3,img{
        margin: 10px 0;
    }
    .box{
        position: relative;
        background-color: white;
        min-width: 400px;
        width: 80%;
        padding: 30px 6%;
        background-color: rgba(207, 215, 222, 0.22);
        box-shadow: #6c757d 1px 1px;
        border-radius: 10px;
    }
    .body{
        padding: 50px;
        display: flex;
        justify-content: center;
    }
    *{
        margin: 0;
        padding: 0;
    }
    .top{
        display: flex;
        background-color: #e8e8e8;
        font-size: 20px;
        align-items: center;
    }
    .top div{
        padding: 10px 20px;
        cursor: pointer;
    }
</style>
</html>